<template>
  <div>
    <div>
      <div class="pic">
        <div class="pic filter"></div>
        <div class="tags">
          <h3>admin, 欢迎回来！</h3>
          <ul>
            <li
              v-for="(item, index) in this.$store.state.channels"
              :key="index"
            >
              <el-button round size="small" :class="[index === i?'choosed':'']" @click="changeIndex(index)">{{ item }}</el-button>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="passage" v-for="(item, index) in passageList" :key="index">
        <div class="title">{{ item.title }}</div>
        <div class="summary">
          摘要：{{ item.summary }}...<a @click="goPage">查看信息</a>
        </div>
        <div class="passageData">
          <span>{{ item.source }}</span>
          <span>by {{ item.author }}</span>
          <span>{{ item.updataTime | formatTime }}</span>
          <span>阅读（{{ item.clickScore }}）</span>
          <span>评论（{{ item.replyCount }}）</span>
          <span><a href="#">编辑</a></span>
          <span><a @click="deletePassage">删除</a></span>
        </div>
      </div>
      <el-pagination
        :current-page="1"
        :page-sizes="[3, 5, 10]"
        :page-size="3"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      total: 0,
      passageList: [],
      i: 0
    };
  },
  methods: {
    // 删除文章
    deletePassage() {
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$message.success("删除成功！！！");
      });
    },
    // 跳转页面
    goPage() {
      this.$router.push({
        path: '/passageData',
        query: {
          data: this.passageList[0]
        }
      })
    },
    // 点击改变标签的样式
    changeIndex(index) {
      this.i = index
    }
  },
  filters: {
    // 格式化时间
    formatTime(time) {
      let date = new Date(time);
      let y = date.getFullYear();
      let mon = date.getMonth() + 1;
      let d = date.getDate();
      let h = date.getHours();
      let min = date.getMinutes();
      let str = y + "-" + mon + "-" + d + " " + h + ":" + min;
      return str;
    },
  },
  // 获取父组件传递的数据
  created() {
    this.total = this.$store.state.data.html.total;
    this.passageList = this.$store.state.data.html.passages;
  },
};
</script>
<style lang="less" scoped>
.pic {
  width: 100%;
  height: 300px;
  background-image: url(../../assets/Supervise/pic.jpg);
  background-position: center;
  background-size: cover;
  position: relative;
  transition: all 0.2s linear;
  .tags {
    width: 650px;
    position: absolute;
    top: 30%;
    left: 30%;
    h3 {
      color: white;
      margin-bottom: 15px;
      font-weight: 500;
    }
    li {
      float: left;
      margin: 15px;
    }
    .el-button::before {
      content: "#";
      padding-right: 3px;
    }
    .choosed {
      background-color: rgb(125, 172, 241);
      color: #fff;
    }
  }
}
.filter::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.filter:hover {
  filter: blur(3px);
  transition: all 0.2s linear;
}
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.passage {
  width: 810px;
  height: 230px;
  color: #333;
  background-color: #fff;
  margin: 0 auto;
  margin-top: 40px;
  padding: 32px;
  border-radius: 10px;
  box-shadow: 0 0 20px 2px rgb(0 0 0 / 10%);
  .title {
    font-size: 20px;
    text-indent: 1em;
    border-left: 3px solid #2175bc;
  }
  .summary {
    font-size: 14px;
    padding: 20px 0 10px 0;
    line-height: 30px;
    a {
      margin-left: 2em;
    }
  }
  .passageData {
    font-size: 12px;
    color: #999;
    float: right;
    margin-top: 20px;
  }
  span {
    display: inline-block;
    padding: 0 10px;
  }
  a {
    color: #39f;
  }
  a:hover {
    color: rgb(77, 77, 228);
    text-decoration: underline;
  }
}
.el-pagination {
  margin-top: 30px;
}
</style>